import React from 'react';
import ReactDom from 'react-dom';
import { Modal, Button,  Form, Input} from 'antd';
const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
    class extends React.Component {
      render() {
        const { visible, onCancel, onCreate, form } = this.props;
        const { getFieldDecorator } = form;
        return (
          <Modal
            visible={visible}
            title="新增一条数据记录"
            okText="新增"
            onCancel={onCancel}
            onOk={onCreate}
          >
            <Form layout="vertical" labelCol={{ span: 3 }} wrapperCol={{ span: 18 }}>
              <Form.Item label="名字">
                {getFieldDecorator('name', {
                  rules: [{ required: true, message: '请输入名字!' }],
                })(<Input />)}
              </Form.Item>
              <Form.Item label="年龄">
                {getFieldDecorator('age')(<Input type="textarea" />)}
              </Form.Item>
              <Form.Item label="地址">
                {getFieldDecorator('adress')(<Input type="textarea" />)}
              </Form.Item>
              <Form.Item label="标签">
                {getFieldDecorator('tags')(<Input type="textarea" />)}
              </Form.Item>
            </Form>
          </Modal>
        );
      }
    },
  );
  
class Alert  extends  React.Component{
    constructor (props){
        super();
        this.state={
            visible: false,
            count:4
        }
       
    }
    componentDidMount() {
        console.log('父级数据',this.props)
        const count = localStorage.getItem('count');
        if(count){
            this.setState({
                count:count
            })
        }
    }
    showModal = () => {
        this.setState({
          visible: true,
        });
      };
    
      handleCreate  = () => {
        const { form } = this.formRef.props;
        const { count } = this.state;
        form.validateFields((err, values) => {
          if (err) {
            return;
          }
          values.count = this.state.count
          console.log('Received values of form: ', values);
          this.props.onValue(values)
          form.resetFields();
          this.setState({ 
              visible: false,
              count: count+1
             });
             localStorage.setItem('count',count+1);
        });
      };
    
      handleCancel = () => {
        this.setState({
          visible: false,
        });
      };
      saveFormRef = formRef => {
        this.formRef = formRef;
      };
    render() {
        return (
          <div>
            <Button type="primary" onClick={this.showModal} style={{ marginBottom: 16 }}>
              添加数据
            </Button>
            <CollectionCreateForm
                wrappedComponentRef={this.saveFormRef}
                visible={this.state.visible}
                onCancel={this.handleCancel}
                onCreate={this.handleCreate}
                />
          </div>
        );
      }
}
export default Alert;